{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>接口库</title>
    <script type="text/javascript/" src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.js' %}"></script>

</head>
<body>

{#导航栏#}
<nav class="navbar navbar-inverse" role="navigation"
     style="position: absolute;top: 0px;left: 80px;width:-webkit-calc(100% - 200px);">
    <div class="container-fluid">
        <div class="navbar-header">
            <span style="font-size: large" class="navbar-brand">项目名称：{{ project.name }}</span>
            <a class="navbar-brand" href="/project_list/">返回项目列表</a>

        </div>

        <div >
            <ul class="nav navbar-nav">
                <li class="active "><a style="color: #0fd1ab" href="/apis/{{ project.id }}/">接口库</a></li>
                <li><a href="/cases/{{ project.id }}/">用例库</a></li>
                <li><a href="/project_set/{{ project.id }}/">项目设置</a></li>
                <li class="active"><a href="/global_data/{{ project.id }}/">全局变量</a></li>
            </ul>
        </div>
    </div>
</nav>


<br><br><br>
{#接口列表显示#}
<div style="padding-left: 15px;z-index: 998">
    <table class="table table-striped">
        <thead>
        <tr>
            <th class="col-md-2">id</th>
            <th class="col-md-3">接口名称</th>
            <th class="col-md-4">url</th>
            <th class="col-md-3">操作</th>
        </tr>
        </thead>
        <tbody>
        {% for api in apis %}
            <tr>
                <td>{{ api.id }}</td>
                <td>{{ api.name }}</td>
                <td>{{ api.short_url }}</td>
                <td class="btn-group">

                    <button onclick="ts_show('{{ api.id }}','{{ api.name }}')" class="btn btn-success"
                            style="z-index: 0">调试
                    </button>
                    <button onclick="open_bz('{{ api.id }}')" class="btn btn-default">备注</button>
                    <button onclick="copy_api('{{ api.id }}')" class="btn btn-default">复制</button>
                    <button onclick="error_test('{{ api.id }}')"
                            class="btn btn-default" style="z-index: 0">异常值测试
                    </button>
                    <button onclick="document.location.href='/project_api_del/{{ api.id }}/'" class="btn btn-danger">
                        删除
                    </button>
                </td>

                {#              用来传递api_body给异常值测试用  #}
                <input style="display: none" type="text" id="api_error_{{ api.id }}" value="{{ api.api_body }}">

            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>


{#自动化异常#}
<div id="error_div"
     style="display: none;position: absolute;left: 10%;top: 20%;width: 80%;background: #3c4043;box-shadow: 4px 4px 8px gray;color: white;padding-left: 10px">

    <div class="btn-group" style="float: right">
        <button onclick="error_play()" type="button" class="btn btn-success">开始测试</button>
        <button onclick="error_close()" type="button" class="btn btn-default">关闭</button>
    </div>
    <h3>接口<span style="color: greenyellow" id="error_api_name"></span> --异常值测试：</h3>
    <strong style="color: #1b6d85">待替换的数据：(用英文 ; 隔开)</strong>
    <input id="ready_error_data" type="text"
           style="color: black;width: 99%;border-radius: 5px;height: 40px;font: bold 15px/40px 微软雅黑"
           placeholder="请输入需要替换的异常值数据,并用 ; 隔开，点击开始测试"> <br><br>
    {#    用来传递异常值测试的原始api_body#}
    <input id="error_api_body" type="text" style="display: none">


    {#    <span style="font: normal 15px/20px 微软雅黑">替换：username --> 123 </span>#}
    {#    <textarea name="" id="" style="height: 50px;width: 99%;color: black"></textarea>#}
    {#    <br><br>#}
    {#    <span style="font: normal 15px/20px 微软雅黑">替换：username --> 123 </span>#}
    {#    <textarea name="" id="" style="height: 50px;width: 99%;color: black"></textarea>#}
    {#    <br><br>#}
    {#    <span style="font: normal 15px/20px 微软雅黑">替换：username --> 123 </span>#}
    {#    <textarea name="" id="" style="height: 50px;width: 99%;color: black"></textarea>#}

</div>
<script>


    {#    测试窗口显示#}

    function error_test(api_id) {
        var api_body = document.getElementById('api_error_'+api_id).value;

        //显示蒙层，并设置好蒙层的层级关系，让其在调试层之下，其他元素之上
        document.getElementById('mengceng').style.display='block';
        document.getElementById('mengceng').style.zIndex='998';
        document.getElementById('error_div').style.zIndex='999';
        error_clean();
        document.getElementById('error_div').style.display='block';
        document.getElementById('error_api_name').innerText = api_id;
        document.getElementById('error_api_body').value = api_body;
    }

    {#开始测试#}

   function error_play() {
        api_body = document.getElementById('error_api_body').value;
        ready_error_data = document.getElementById('ready_error_data').value;
        // 获取接口id
        var api_id = document.getElementById('error_api_name').innerText ;
        //把预替换数据从一个大字符串，按逗号解析成数组。
        var r = ready_error_data.split(',');
        //判断是不是form-data/x-www...的二维数组格式
        try {
            var s = eval(api_body);
            if(s instanceof Array){
                console.log('这是数组');
                for(var i=0;i<s.length;i++){ //第一层 判断一共请求体有几个参数就进行几次大循环
                    for(var j=0;j<r.length;j++){
                        var new_body = []; //我们不能在s本尊上来回替换，所以弄了个替身，这个替身每次新的参数循环，都会重新被赋值原始s
                        $.extend(true,new_body, s);
                        new_body[i][1] = eval(r[j]);
                        console.log(new_body);
                        span_text = '替换：'+new_body[i][0]+'-->'+r[j];
                        $.get('/error_request/',{
                            'api_id':api_id,
                            'new_body':JSON.stringify(new_body),
                            'span_text':span_text
                        },function (ret) {
                            res = eval(ret);
                            error_show_response(res.span_text,res.response);
                        });
                    }
                }
            }else{
                console.log('这是none');
                alert('当前请求体不含任何内容！');
            }
        }catch (e) {
            //若不是就继续判断是不是raw-json的json串格式
            try {
                var s = JSON.parse(api_body);
                console.log('这是字典json');
                for(var i in s){
                    for(var j=0;j<r.length;j++){
                        var new_body = {};
                        $.extend(true,new_body, s);
                        new_body[i] = eval(r[j]);
                        console.log(new_body);
                        var span_text = '替换：'+i+'-->'+r[j];
                        $.get('/error_request/',{
                            'api_id':api_id,
                            'new_body':JSON.stringify(new_body),
                            'span_text':span_text
                        },function (ret) {
                            res = eval(ret);
                            error_show_response(res.span_text,res.response);
                        });
                    }
                }
            }catch (e) {
                console.log(e)
                //若也不是，那就不需要做异常值测试了
                alert('当前接口的请求体类型不支持异常值测试！')
            }
        }
    }
    {#测试结果显示#}

    function error_show_response(span_text, ret) {
        var error_div = document.getElementById('error_div');
        var s = document.createElement('span');
        s.innerText = span_text;
        var t = document.createElement('textarea');
        t.style = 'width: 99%;height: 50px;border-radius: 5px;color: black;margin-bottom: 10px';
        t.value = ret;

        error_div.appendChild(s);
        error_div.appendChild(t);

    }

    {#关闭测试窗#}

    function error_close() {
        {#document.getElementById('error_div').style.display = 'none';#}
        document.location.reload();

    }

    //清除上一次显示的数据
    function error_clean() {
        $("#error_div").html(' <div class="btn-group" style="float: right">' +
            '<button onclick="error_play()" class="btn btn-success">开始测试</button>' +
            '<button onclick="error_close()" class="btn btn-default">关闭</button>' +
            '</div>' +
            ' <h3>接口：<span style="color: greenyellow" id="error_api_name"></span> 的异常值测试结果如下：</h3>' +
            '<strong> 替换的异常值参数为：</strong><br>' +
            '<input type="text" style="color: #000;width: 99%;border-radius: 5px" id="ready_error_data" value="\'a\',123,\'\',\' \',\'./?*&^\',\'中文\'">' +
            '<br><br>')
    }






</script>


{# 调试弹层及函数#}
<div id="ts"
     style="z-index:999;display: none;padding-left: 10px;color: white;width: 60%;position: absolute;left: 20%;top: 10%;background: #353C48;box-shadow: 4px 4px 8px grey">
    {#    保存与取消按钮#}
    <div class="btn-group" style="float: right">
        <button onclick="ts_save()" class="btn btn-success">保存</button>
        <button onclick="ts_close()" class="btn btn-default">取消</button>
    </div>
    {#    第一行接口id 和name显示#}
    <h3>接口：
        <small id="ts_api_id" style="color: #047091"></small>
        ---
        <input type="text" id="ts_api_name"
               style="padding-left: 5px;width: 50%;color: #047091;font: normal 18px/30px 微软雅黑" placeholder="请输入接口名称">
        <select name="ts_login" id="ts_login" style="color: black;height:30px;font-size:medium">
            <option value="no" id="ts_login_no">不加登陆态</option>
            <option value="yes" id="ts_login_yes">加登陆态</option>
        </select>


    </h3>
    <br>
    {#第一行 method url send#}
    <ul class="nav navbar-nav" style="width:98%">
        <li>
            <select id="ts_method" class="form-control" style="height: 40px;">
                <option value="none">请选择</option>
                <option value="get">GET</option>
                <option value="post">POST</option>
                <option value="put">PUT</option>
                <option value="delete">DELETE</option>
            </select>
        </li>


        <li style="width: -webkit-calc(100% - 225px)">
            <input id="ts_url" class="form-control"
                   style=";padding-left: 10px;width: 100%;height: 40px;color: black;font: normal 18px/30px '微软雅黑';"
                   type="text"
                   placeholder='url: 如 /abcd/efgh/' value="">
        </li>
        {#        发送按钮#}
        <li>
            <button onclick="ts_send()" type="button" style="height: 40px;width: 120px" class="btn btn-default"><span
                    style="font-size: large;">Send</span></button>
        </li>
    </ul>
    <br><br><br>

    {#    host#}
    <ul class="nav navbar-nav" style="width:98%">
        <li style="width: -webkit-calc(100% - 70px)">

            <datalist id="datalist_1">
                {% for i in project_host %}
                    <option id="project_host_{{ i.id }}" value="全局域名-{{ i.id }}">{{ i.name }}:{{ i.host }}</option>
                {% endfor %}

                {% for i in hosts %}
                    <option id="host_{{ i.id }}" value="{{ i.host }}">{{ i.host }}</option>
                {% endfor %}

            </datalist>


            <input list="datalist_1" autocomplete="off" id="ts_host" type="text"
                   style="width: 100%;height: 40px;color: black;font: normal 18px/30px '微软雅黑';"
                   class="form-control"
                   placeholder="host:如 http(s)://aaaaa:bbb.com">

        </li>

        <li style="width: 70px">
            <button onclick="ts_clear_host()" style="height: 40px" class="btn btn-default"><span
                    style="font-size: large">clear</span></button>
        </li>
    </ul>


    <br><br><br>

    {#    请求头#}
    <ul class="nav navbar-nav" style="width: 99%">
        <li style="width:  -webkit-calc(100% - 127px)">
            <input id="ts_header" style="color: black;padding-left: 10px;width: 100%;height: 40px;" type="text"
                   placeholder='header请求头：如{"Content":"application/json"}' value="">
        </li>
        <li class="btn-group">
            <button type="button" onclick="ts_clear_header()"
                    style="height: 40px;width: 60px;"
                    class="btn btn-default"><span>Clear</span></button>
            <button type="button" onclick="ts_show_project_header()"
                    style="height: 40px;width: 60px;"
                    class="btn btn-default"><span>▼️</span></button>
        </li>
        <br>

        <li id="ts_project_header_li" style="display: none">
            {#            <label style="margin-right: 5px"><input type="checkbox">name1</label>#}
            {#             <label style="margin-right: 5px"><input type="checkbox">name2</label>#}
            {#             <label style="margin-right: 5px"><input type="checkbox">name3</label>#}
            {% for i in project_header %}
                <label style="margin-right: 5px"><input id="checkbox_{{ i.id }}" value="{{ i.id }}"
                                                        type="checkbox">{{ i.name }}</label>
            {% endfor %}


        </li>
    </ul>

    <br><br><br>
    {#数据类型选择框#}
    <ul id="myTab" class="nav nav-tabs">
        <li class="active"><a id="click_none" href="#none" data-toggle="tab">none</a></li>
        <li><a href="#form-data" data-toggle="tab">form-data</a></li>
        <li><a href="#x-www-form-urlencoded" data-toggle="tab">x-www-form-urlencoded</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">raw <b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                <li><a href="#Text" data-toggle="tab">Text</a></li>
                <li><a href="#JavaScript" data-toggle="tab">JavaScript</a></li>
                <li><a href="#Json" data-toggle="tab">Json</a></li>
                <li><a href="#Html" data-toggle="tab">Html</a></li>
                <li><a href="#Xml" data-toggle="tab">Xml</a></li>
            </ul>
        </li>
        <li><a href="#response" data-toggle="tab">返回体</a></li>
    </ul>


    {#    数据类型的输入框#}
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="none" style="text-align: center;color: gray">
            <h3>这个请求不会携带任何请求体</h3>

        </div>
        <div class="tab-pane fade" id="form-data">

            <div class="table-responsive" style="width: 98%;color: black">
                <table class="table table-bordered table-striped" id="mytable" style="background-color:white">
                    <thead style="color: #337ab7;font-size: x-small">
                    <tr>
                        <td style="width: 30%">Key</td>
                        <td style="width: 50%">Value</td>
                    </tr>
                    </thead>
                    <tbody id="mytbody">
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <button class="btn btn-default" id="add"><i class="fa fa-plus"></i> 添加新参数</button>
            <script>
                window.jQuery || document.write('<script src="/static/201801271505/js/jquery-1.11.0.min.js"><\/script>')



            </script>
            <script type="text/javascript" src="/static/201801271505/js/bootstable.js"></script>

            {#                        <script type="text/javascript">#}
            {#                            $('#mytable').SetEditable({#}
            {#                                $addButton: $('#add'),#}
            {#                            });#}
            {#                        </script>#}


        </div>
        <div class="tab-pane fade" id="x-www-form-urlencoded">

            <div class="table-responsive" style="width: 98%;color: black">
                <table class="table table-bordered table-striped" id="mytable2" style="background-color:white">
                    <thead style="color: #337ab7;font-size: x-small">
                    <tr>
                        <td style="width: 30%">Key</td>
                        <td style="width: 50%">Value</td>
                    </tr>
                    </thead>
                    <tbody id="mytbody2">
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <button class="btn btn-default" id="add2"><i class="fa fa-plus"></i> 添加新参数</button>
            <script>
                window.jQuery || document.write('<script src="/static/201801271505/js/jquery-1.11.0.min.js"><\/script>')



            </script>
            <script type="text/javascript" src="/static/201801271505/js/bootstable.js"></script>

            {#            <script type="text/javascript">#}
            {#                $('#mytable2').SetEditable({#}
            {#                    $addButton: $('#add2'),#}
            {#                });#}
            {#            </script>#}


        </div>
        <div class="tab-pane fade" id="Text">
            <textarea name="" id="raw_Text" style="width: 99%;height:450px;color: black;font-size: 20px"></textarea>
        </div>
        <div class="tab-pane fade" id="JavaScript">
            <textarea name="" id="raw_JavaScript"
                      style="width: 99%;height:450px;color: black;font-size: 20px"></textarea>
        </div>
        <div class="tab-pane fade" id="Json">
            <textarea name="" id="raw_Json" style="width: 99%;height:450px;color: black;font-size: 20px"></textarea>
        </div>
        <div class="tab-pane fade" id="Html">
            <textarea name="" id="raw_Html" style="width: 99%;height:450px;color: black;font-size: 20px"></textarea>
        </div>
        <div class="tab-pane fade" id="Xml">
            <textarea name="" id="raw_Xml" style="width: 99%;height:450px;color: black;font-size: 20px"></textarea>
        </div>
        <div class="tab-pane fade" id="response">

            <textarea name="" id="ts_response_body" disabled="disabled"
                      style="color: black;width: 99%;height:450px;color: black;font-size: 20px"></textarea>

        </div>
    </div>
    <br>
</div>

<script>


    {#复制接口#}

    function copy_api(api_id) {
        $.get("/copy_api/", {
                "api_id": api_id
            },
            function (ret) {
                document.location.reload();
            })


    }

    {# 发送请求#}

    function ts_send() {
        var ts_method = document.getElementById('ts_method').value;
        var ts_url = document.getElementById('ts_url').value;
        var ts_host = document.getElementById('ts_host').value;
        var ts_header = document.getElementById('ts_header').value;
        var ts_body_method = $("ul#myTab li[class='active']").text();
        // 登录态
        var ts_login = document.getElementById('ts_login').value;
        // 全局请求头
        var project_headers = document.getElementById('ts_project_header_li').children;
        var ts_project_headers = [];
        for (var i = 0; i < project_headers.length; i++) {
            if (project_headers[i].children[0].checked == true) {
                ts_project_headers.push(project_headers[i].children[0].value)
            }
        }


        if (ts_url == '') {
            alert('请输入url');
            return
        }
        if (ts_host == '') {
            alert('请输入host');
            return
        }
        if (ts_method == 'none') {
            alert('请选择请求方式');
            return
        }
        // 判断host是否合法
        if (ts_host.slice(0, 7) != 'http://' && ts_host.slice(0, 8) != 'https://' && ts_host.slice(0, 4) != '全局域名') {
            alert('host必须以http:// 或者 https://  开头');
            return;
        }

        //处理请求头为空
        if (ts_header != '') {
            try {
                JSON.parse(ts_header)
            } catch (e) {
                alert('header请求头不符合json规范！');
                return
            }
        }

        var ts_api_name = $("#ts_api_name").val();

        if (ts_body_method == 'none') {
            var ts_api_body = "";
        }
        if (ts_body_method == 'form-data') {
            var ts_api_body = [];
            var t_body = $("table#mytable tbody");
            var trlist = t_body.children();
            {#console.log(trlist);#}
            for (var i = 0; i < trlist.length; i++) {
                var tdattr = trlist[i].children;
                var key = tdattr[0].innerText;
                var value = tdattr[1].innerText;
                ts_api_body.push([key, value]);
            }
            // 前端把列表转化为字符串
            ts_api_body = JSON.stringify(ts_api_body);
        }
        if (ts_body_method == 'x-www-form-urlencoded') {
            var ts_api_body = [];
            var t_body = $("table#mytable2 tbody");
            var trlist = t_body.children();
            {#console.log(trlist);#}
            for (var i = 0; i < trlist.length; i++) {
                var tdattr = trlist[i].children;
                var key = tdattr[0].innerText;
                var value = tdattr[1].innerText;
                ts_api_body.push([key, value]);
            }
            // 前端把列表转化为字符串
            ts_api_body = JSON.stringify(ts_api_body);
        }
        if (ts_body_method == 'Text') {
            var ts_api_body = document.getElementById('raw_Text').value;
        }
        if (ts_body_method == 'JavaScript') {
            var ts_api_body = document.getElementById('raw_JavaScript').value;
        }
        if (ts_body_method == 'Json') {
            var ts_api_body = document.getElementById('raw_Json').value;
        }
        if (ts_body_method == 'Html') {
            var ts_api_body = document.getElementById('raw_Html').value;
        }
        if (ts_body_method == 'Xml') {
            var ts_api_body = document.getElementById('raw_Xml').value;
        }

        var api_id = document.getElementById('ts_api_id').innerText;

        $.get("/Api_send/", {
            "api_id": api_id,
            'ts_method': ts_method,
            "ts_url": ts_url,
            'ts_header': ts_header,
            'ts_host': ts_host,
            'ts_body_method': ts_body_method,
            'ts_api_body': ts_api_body,
            'ts_api_name': ts_api_name,

            'ts_login':ts_login,

            "ts_project_headers": ts_project_headers.toString(),

        }, function (ret) {
            $("li a[href=#response]").click();   //点击返回体按钮
            document.getElementById('ts_response_body').value = ret;
        })


    }

    {#    清理ts窗口输入框的缓存#}

    function clear_ts_api() {
        $("#ts_api_id").text();
        $("#ts_api_name").val();
        $("#ts_method").text();
        $("#ts_url").text();
        $("#ts_header").text();
        $("#ts_host").text();
        $("#ts_api_id").text();
        $("#ts_login").val();
        $("#click_none").click;

        document.getElementById('mytbody').innerHTML = "<tr><td></td><td></td></tr>";
        document.getElementById('mytbody2').innerHTML = "<tr><td></td><td></td></tr>";

        $("#raw_Text").val();
        $("#raw_JavaScript").val();
        $("#raw_Json").val();
        $("#raw_Xml").val();
        $("#raw_Html").val();
        $("#ts_response_body").val();
        {#解决第三方插件显示问题#}
        $('#mytable').SetEditable({
            $addButton: $('#add'),
        });
        {#解决第三方插件显示问题#}
        $('#mytable2').SetEditable({
            $addButton: $('#add2'),
        });

    }

    {# 弹窗取消#}

    function ts_close() {
        {#第三方插件会出问题#}
        {#$("#ts").hide();#}
        document.location.reload();
    }

    {# 保存弹框内容#}

    function ts_save() {
        var ts_method = document.getElementById('ts_method').value;
        var ts_url = document.getElementById('ts_url').value;
        var ts_host = document.getElementById('ts_host').value;
        var ts_header = document.getElementById('ts_header').value;
        var ts_api_name = $("#ts_api_name").val();

        // 登录态接口
        var ts_login = document.getElementById('ts_login').value;
        // 全局请求头
        var project_headers = document.getElementById("ts_project_header_li").children;

        var ts_project_headers = [];
        for (var i = 0; i < project_headers.length; i++) {
            if (project_headers[i].children[0].checked == true) {
                ts_project_headers.push(project_headers[i].children[0].value)
            }
        }


        console.log(ts_project_headers);

        //判断数据是否填充
        if (ts_api_name == '') {
            alert('请输入接口名称');
            return
        }
        if (ts_url == '') {
            alert('请输入url');
            return
        }
        if (ts_host == '') {
            alert('请输入host');
            return
        }
        if (ts_host.slice(0, 7) != 'http://' && ts_host.slice(0, 8) != 'https://' && ts_host.slice(0, 4) != '全局域名') {
            alert('host必须以http:// 或者 https://  开头');
            return;
        }
        if (ts_method == 'none') {
            alert('请选择请求方式');
            return
        }


        var ts_body_method = $("ul#myTab li[class='active']").text();


        if (ts_body_method == 'none') {
            var ts_api_body = "";
        }
        if (ts_body_method == 'form-data') {
            var ts_api_body = [];
            var t_body = $("table#mytable tbody");
            var trlist = t_body.children();
            {#console.log(trlist);#}
            for (var i = 0; i < trlist.length; i++) {
                var tdattr = trlist[i].children;
                var key = tdattr[0].innerText;
                var value = tdattr[1].innerText;
                ts_api_body.push([key, value]);
            }
            // 前端把列表转化为字符串
            ts_api_body = JSON.stringify(ts_api_body);
        }
        if (ts_body_method == 'x-www-form-urlencoded') {
            var ts_api_body = [];
            var t_body = $("table#mytable2 tbody");
            var trlist = t_body.children();
            {#console.log(trlist);#}
            for (var i = 0; i < trlist.length; i++) {
                var tdattr = trlist[i].children;
                var key = tdattr[0].innerText;
                var value = tdattr[1].innerText;
                ts_api_body.push([key, value]);
            }
            // 前端把列表转化为字符串
            ts_api_body = JSON.stringify(ts_api_body);
        }
        if (ts_body_method == 'Text') {
            var ts_api_body = document.getElementById('raw_Text').value;
        }
        if (ts_body_method == 'JavaScript') {
            var ts_api_body = document.getElementById('raw_JavaScript').value;
        }
        if (ts_body_method == 'Json') {
            var ts_api_body = document.getElementById('raw_Json').value;
        }
        if (ts_body_method == 'Html') {
            var ts_api_body = document.getElementById('raw_Html').value;
        }
        if (ts_body_method == 'Xml') {
            var ts_api_body = document.getElementById('raw_Xml').value;
        }
        //获取接口的id 用来发送给后端做数据库存储
        var api_id = document.getElementById('ts_api_id').innerText;

        $.get("/Api_save/", {
                "api_id": api_id,
                'ts_method': ts_method,
                "ts_url": ts_url,
                'ts_header': ts_header,
                'ts_host': ts_host,
                'ts_body_method': ts_body_method,
                'ts_api_body': ts_api_body,
                'ts_api_name': ts_api_name,
                'ts_login' : ts_login,
                'ts_project_headers': ts_project_headers.toString(),


            },
            function (ret) {

                {#$("#ts").hide();#}
                {#                这里把关闭弹窗改为页面刷新，保证页面上数据是最新的#}
                document.location.reload();
            })


    }

    {#    显示弹窗#}

    function ts_show(id, name) {
        clear_ts_api();
        document.getElementById('mengceng').style.display = 'block';
        document.getElementById('mengceng').style.zIndex = '998';
        document.getElementById("ts").style.display = 'block'
        document.getElementById("ts").style.zIndex = '999';
        document.getElementById('ts_api_id').innerText = id;
        document.getElementById('ts_api_name').value = name;


        $.get("/get_api_data/", {
            "api_id": id
        }, function (ret) {
            console.log(ret);
            document.getElementById('ts_api_name').value = ret.name;
            document.getElementById('ts_method').value = ret.api_method;
            document.getElementById('ts_url').value = ret.api_url;
            document.getElementById('ts_header').value = ret.api_header;
            document.getElementById('ts_host').value = ret.api_host;

            console.log(ret.public_header);
             if(ret.api_login != null && ret.api_login != ''){
            document.getElementById('ts_login').value = ret.api_login;
            }
            // 公共请求头
            if (ret.public_header != null) {
                var project_headers = ret.public_header.split(",");

                for (var i = 0; i < project_headers.length; i++) {
                    try {
                        document.getElementById("checkbox_" + project_headers[i]).checked = 'checked'
                    } catch (e) {

                    }

                }

            }
            // 请求数据的类型标签选择，就是相当于点击了上面的a标签
            var body_method = "#" + ret.body_method;
            {#console.log("li a[href=" + body_method + "]");#}
            $("li a[href=" + body_method + "]").click();

            //请求体显示
            if (ret.body_method == 'Text') {
                document.getElementById('raw_Text').value = ret.api_body;
            }
            if (ret.body_method == 'Json') {

                document.getElementById('raw_Json').value = ret.api_body;
            }
            if (ret.body_method == 'JavaScript') {

                document.getElementById('raw_JavaScript').value = ret.api_body;
            }
            if (ret.body_method == 'Xml') {
                document.getElementById('raw_Xml').value = ret.api_body;
            }
            if (ret.body_method == 'Html') {
                document.getElementById('raw_Html').value = ret.api_body;
            }

            if (ret.body_method == 'form-data') {
                var tbody = document.getElementById('mytbody'); // 定位表格中的tbody部分
                body = eval(ret.api_body); //把这个像列表的字符串请求体变成真正的列表
                for (var i = 0; i < body.length; i++) { // 遍历这个请求体列表
                    key = body[i][0]; //拿出每一个键值对的key
                    value = body[i][1];//拿出每一个键值对的value
                    var childs_tr = tbody.children;//获取到这个表格下面所有的tr组成的大列表
                    // 每个tr下的children得到的是 td列表，只有俩个。
                    childs_tr[i].children[0].innerText = key; //第一个td放key
                    childs_tr[i].children[1].innerText = value;//第二个td放value
                    //判断是否是最后一次遍历，来决定是否点击新增参数按钮
                    if (i < body.length - 1) {
                        document.getElementById('add').click()
                    }
                }
            }


            if (ret.body_method == 'x-www-form-urlencoded') {
                var tbody = document.getElementById('mytbody2'); // 定位表格中的tbody部分
                body = eval(ret.api_body); //把这个像列表的字符串请求体变成真正的列表
                for (var i = 0; i < body.length; i++) { // 遍历这个请求体列表
                    key = body[i][0]; //拿出每一个键值对的key
                    value = body[i][1];//拿出每一个键值对的value
                    var childs_tr = tbody.children;//获取到这个表格下面所有的tr组成的大列表
                    // 每个tr下的children得到的是 td列表，只有俩个。
                    childs_tr[i].children[0].innerText = key; //第一个td放key
                    childs_tr[i].children[1].innerText = value;//第二个td放value
                    //判断是否是最后一次遍历，来决定是否点击新增参数按钮
                    if (i < body.length - 1) {
                        document.getElementById('add2').click()
                    }
                }
            }


        })

    }

    function ts_show_project_header() {
        document.getElementById('ts_project_header_li').style.display = 'block'
    }


    function ts_clear_header() {
        document.getElementById('ts_header').value = "";
    }

    function ts_clear_host() {
        document.getElementById("ts_host").value = "";
    }






</script>


{#备注窗口#}
<div id="bz"
     style="display: none;height:30%;width:50%;position: fixed;left: 25%;top: 35%;background: #3c4043;box-shadow: 4px 4px 8px grey">
    <input type="text" id="which_api" style="display: none">
    <textarea name="" id="bz_value" style="width: 100%;height: 88%;" placeholder="请输入备注内容">

    </textarea>
    <br>
    <button onclick="save_bz()" class="btn btn-success" style="width: 49.8%;height: 12%;">确定</button>
    <button onclick="close_bz()" class="btn btn-danger" style="width: 49.2%;height: 12%;">取消</button>
</div>


{#备注#}
<script>
    function open_bz(id) {
        $("#bz_value").val();

        $.get("/get_bz/", {
            "api_id": id
        }, function (ret) {
            document.getElementById('bz').style.display = 'block';
            document.getElementById('which_api').value = id;
            document.getElementById('bz_value').value = ret;
        })


    }

    function save_bz() {
        text = $("#bz_value").val();
        id = document.getElementById('which_api').value;
        $.get("/save_bz/",
            {
                "api_id": id,
                "bz_value": text
            },
            function (ret) {
                $("#bz").hide();
            }
        )


    }

    function close_bz() {
        $("#bz").hide();

    }




</script>


{#底部工具栏#}
<div style="position: absolute;bottom: 0px;width: 100%;background: #f8f8f8;
text-align: center;border: 1px solid #e7e7e7">
    <div class="btn-group">
        <button onclick="document.location.href='/project_api_add/{{ project.id }}/'" type="button"
                class="btn btn-primary">新增接口
        </button>
        <button onclick="fid_div_show()" type="button"
                class="btn btn-default">fiddler抓包导入
        </button>
        <button onclick="project_header_div_show()" type="button" class="btn btn-default">全局请求头</button>
        <button onclick="project_host_div_show()" type="button" class="btn btn-default">全局域名</button>
        <button onclick="login_show()" type="button" class="btn btn-default">登录态接口</button>
    </div>

</div>

{#fiddler 上传文件窗口#}
<div id=fd_div
     style="z-index:999;background:#353C48;display: none;color: white;width: 30%;height:150px;position: absolute;left: 30%;top: 40%;box-shadow: 4px 4px 8px grey">
    <span style="font: bold 16px/16px 微软雅黑">Fiddler抓包导出text格式文件-上传Api库</span>
    <button onclick="javascript:$('#fd_div').hide()" class="btn btn-danger" style="float: right">关闭</button>
    <br>
    <span>在fiddler中选择要导出的包，右键Save-->Selected Sessions-->as Text..</span>


    <form style="display: block;margin-top: 50px;margin-left: 100px" id="upload_fd"
          action="/upload_fd/{{ project.id }}/" method="post" enctype="multipart/form-data">

        <input type="file" name="fileUpload"
               style="margin-left: 35px;width: 200px;height: 30px;float: left"/>

        <button onclick="upload_py()" style="color: black;width: 80px;height: 30px;margin-left: 20px"> 上传文件</button>
    </form>

</div>

<script>
    function fid_div_show() {
        $("#fd_div").css('display', 'block')
    }




</script>

{# 全局请求头#}
<div id="project_header_div" style="display: none;border-radius: 5px;width: 70%;height: 70%;
position: absolute;left: 15%;top: 15%;box-shadow: 4px 4px 8px grey;padding-left: 10px;background: white">
    <div class="btn-group" style="float: right">
        <button onclick="project_header_save()" type="button" class="btn btn-success">保存</button>
        <button onclick="project_header_close()" type="button" class="btn btn-danger">取消</button>
    </div>

    <h3>请设置本项目全局公共请求头：</h3>


    <div id="header_plan">
        {% for i in project_header %}
            <input type="text" name="header_id" value="{{ i.id }}" style="display: none">
            <input name='header_name' type="text" value="{{ i.name }}" style="width: 20%;margin-top: 3px"
                   placeholder="请求头name"> = {"
            <input name='header_key' type="text" value="{{ i.key }}" style="width: 15%" placeholder="请求头key"> " : "
            <input name='header_value' type="text" value="{{ i.value }}" style="width: 50%" placeholder="请求头value"> "}
            <br>
        {% endfor %}
    </div>
    <br>
    <button onclick="add_project_header()">新增</button>

</div>
<script>
    function project_header_save() {
        var names = document.getElementsByName('header_name');
        var keys = document.getElementsByName('header_key');
        var values = document.getElementsByName('header_value');
        var ids = document.getElementsByName('header_id');

        var req_names = [];
        var req_keys = [];
        var req_values = [];
        var req_ids = [];

        for (var i = 0; i < names.length; i++) {

            req_names.push(names[i].value);
            req_keys.push(keys[i].value);
            req_values.push(values[i].value);
            req_ids.push(ids[i].value)


        }
        //   console.log(req_names);
        // console.log(req_keys);
        //  console.log(req_values);
        $.get('/save_project_header/', {
            "project_id": "{{ project.id }}",
            "req_names": req_names.toString(),
            "req_keys": req_keys.toString(),
            "req_values": req_values.toString(),
            'req_ids': req_ids.toString(),
        }, function (ret) {
            document.location.reload();
        })

    }

    {#    全局请求头窗口显示#}

    function project_header_div_show() {
        $("#project_header_div").show();

    }

    {#    全局请求头窗口关闭#}

    function project_header_close() {
        {#$("#project_header_div").hide();#}
        document.location.reload();

    }

    {#    新增按钮#}

    function add_project_header() {
        var header_plan = document.getElementById("header_plan");

        var i0 = document.createElement('input');
        i0.name = 'header_id';
        i0.value = 'new';
        i0.style.display = 'none'


        //
        var i1 = document.createElement('input');
        i1.style = 'width:20%;margin-top:3px';
        i1.placeholder = '请求头name';
        i1.name = 'header_name';
        var i2 = document.createElement('input');
        i2.style = 'width:15%;';
        i2.placeholder = '请求头key';
        i2.name = 'header_key';
        var i3 = document.createElement('input');
        i3.style = 'width:50%';
        i3.placeholder = '请求头value';
        i3.name = 'header_value';

        header_plan.appendChild(i0);

        header_plan.appendChild(i1);
        header_plan.appendChild(document.createTextNode(' = {" '))
        header_plan.appendChild(i2);
        header_plan.appendChild(document.createTextNode(' " : " '))
        header_plan.appendChild(i3)
        header_plan.appendChild(document.createTextNode(' "}'))
        header_plan.appendChild(document.createElement('br'))


    }




</script>


{# 全局域名 #}

<div id="project_host_div" style="display: none;border-radius:5px;width: 70%;height: 70%;
position: absolute;left: 15%;top: 15%;box-shadow: 4px 4px 8px grey;
padding-left: 10px;background-color: white">
    <div class="btn-group" style="float: right">
        <button onclick="project_host_save()" type="button" class="btn btn-success">保存</button>
        <button onclick="project_host_close()" type="button" class="btn btn-default">取消</button>
    </div>
    <h4>请设置本项目的全局域名：</h4>
    <div id="host_plan">
        {% for i in project_host %}
            <input type="text" name="host_id" value="{{ i.id }}" style="display: none;">
            <input type="text" name="host_name" value="{{ i.name }}" style="width: 20%;margin-top: 3px"
                   placeholder="name"> = "
            <input type="text" name="host_host" value="{{ i.host }}" style="width: 70%" placeholder="host"> "
            <br>
        {% endfor %}
    </div>
    <br>
    <button onclick="add_project_host()">新增</button>

</div>
<script>
    function project_host_div_show() {
        document.getElementById('project_host_div').style.display = 'block';
    }

    function project_host_close() {
        document.location.reload()
    }

    function project_host_save() {
        var names = document.getElementsByName('host_name');
        var hosts = document.getElementsByName('host_host');
        var ids = document.getElementsByName('host_id');
        var req_names = [];
        var req_hosts = [];
        var req_ids = [];
        for (var i = 0; i < names.length; i++) {
            req_names.push(names[i].value);
            req_hosts.push(hosts[i].value);
            req_ids.push(ids[i].value)

        }
        $.get('/save_project_host/', {
            "project_id": "{{ project.id }}",
            "req_names": req_names.toString(),
            "req_hosts": req_hosts.toString(),
            "req_ids": req_ids.toString(),
        }, function (ret) {
            document.location.reload();
        })
    }

    function add_project_host() {
        var host_plan = document.getElementById('host_plan');
        var i0 = document.createElement('input');
        i0.name = 'host_id';
        i0.value = 'new';
        i0.style.display = 'none';
        var i1 = document.createElement('input');
        i1.style = 'width: 20%;margin-top: 3px';
        i1.placeholder = 'name';
        i1.name = 'host_name';
        var i2 = document.createElement('input');
        i2.style = 'width: 70%';
        i2.placeholder = 'host';
        i2.name = 'host_host';
        host_plan.appendChild(i0);
        host_plan.appendChild(i1);
        host_plan.appendChild(document.createTextNode(' = " '));
        host_plan.appendChild(i2);
        host_plan.appendChild(document.createTextNode(' "'));
        host_plan.appendChild(document.createElement("br"));
    }




</script>


{#蒙层底板#}
<div id="mengceng" style="display: none;opacity:0.5;position: absolute;left: 0;top: 100px;
                          background-color: gray;width: 100%">
</div>
<script>
    document.getElementById('mengceng').style.height = window.screen.availHeight.toString() + 'px';




</script>


{# 登录态接口#}
<div id="login_set_div" style="display:none;border-radius:5px;width: 50%;position: absolute;left: 20%;
top: 20%;background: white;color: black;padding-left: 10px">
    <div class="btn btn-group" style="float: right;padding: 0px">
        <button onclick="login_save()" class="btn btn-success">保存</button>
        <button onclick="login_close()" class="btn btn-default">取消</button>
    </div>
    <h3>请设置该项目的登录态接口</h3>
    <br>
    {#    请求方式和url#}
    <ul class="nav navbar-nav" style="width: 98%">
        <li>
            <select id="login_method" style="height: 40px;" class="form-control">
                <option value="none">请求方式</option>
                <option value="post">POST</option>
                <option value="get">GET</option>
                <option value="put">PUT</option>
                <option value="delete">DELETE</option>
            </select>
        </li>
        <li style="width: -webkit-calc(100% - 225px)">
            <input id="login_url" style="color: black;padding-left: 10px;width: 100%;
           height: 40px;" placeholder="url: 如 /abcd/efgh/" type="text">
        </li>
        <li>
            <button onclick="login_send()" type="button"
                    style="height: 40px;width: 120px;"
                    class="btn btn-default"><span style="font-size: large">Send</span></button>
        </li>
    </ul>
    <br><br><br>
    {#    请求host#}
    <ul class="nav navbar-nav" style="width:98%">
        <li style="width: 100%">
            <input list="datalist_1" id="login_host" type="text" autocomplete="off"
                   style="color: #000000;padding-left: 10px;width: 100%;height: 40px"
                   placeholder="host:如http(s)://xxxx.com" value="">
        </li>

    </ul>
    <br><br><br>
    {#    请求头#}
    <ul class="nav navbar-nav" style="width: 98%">
        <li style="width: 100%">
            <input id="login_header" style="color: black;padding-left: 10px;width: 100%;height: 40px;" type="text"
                   placeholder='header请求头：如{"Content":"application/json"}' value="">
        </li>
    </ul>
    <br><br><br>
    {#    body_method#}
    <ul id="login_myTab" class="nav nav-tabs">
        <li class="active"><a id="login_click_none" href="#login_none" data-toggle="tab">none</a></li>
        <li><a href="#login_form-data" data-toggle="tab">form-data</a></li>
        <li><a href="#login_x-www-form-urlencoded" data-toggle="tab">x-www-form-urlencoded</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">raw <b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="login_myTabDrop1">
                <li><a href="#login_Text" tabindex="-1" data-toggle="tab">Text</a></li>
                <li><a href="#login_JavaScript" tabindex="-1" data-toggle="tab">JavaScript</a></li>
                <li><a href="#login_Json" tabindex="-1" data-toggle="tab">Json</a></li>
                <li><a href="#login_Html" tabindex="-1" data-toggle="tab">Html</a></li>
                <li><a href="login_#Xml" tabindex="-1" data-toggle="tab">Xml</a></li>
            </ul>
        </li>

        <li><a href="#login_response" data-toggle="tab">返回体</a></li>
    </ul>
    <div id="login_myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="login_none" style="text-align: center;color: grey">
            <h3>这个请求将不会携带任何请求体</h3>
            <h5>This request will not carry any request-body</h5>
        </div>
        <div class="tab-pane fade" id="login_form-data">
            <div class="table-responsive" style="width: 98%;color: black">
                <table class="table table-bordered table-striped" id="login_mytable" style="background-color:white">
                    <thead style="color: #337ab7;font-size: x-small">
                    <tr>
                        <td style="width: 30%">Key</td>
                        <td style="width: 50%">Value</td>
                    </tr>
                    </thead>
                    <tbody id="login_mytbody">
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <button class="btn btn-default" id="login_add"><i class="fa fa-plus"></i> 添加新参数</button>
            <script>
                window.jQuery || document.write('<script src="/static/201801271505/js/jquery-1.11.0.min.js"><\/script>')



            </script>
            <script type="text/javascript" src="/static/201801271505/js/bootstable.js"></script>
        </div>
        <div class="tab-pane fade" id="login_x-www-form-urlencoded">
            <div class="table-responsive" style="width: 98%;color: black">
                <table class="table table-bordered table-striped" id="login_mytable2" style="background-color:white">
                    <thead style="color: #337ab7;font-size: x-small">
                    <tr>
                        <td style="width: 30%">Key</td>
                        <td style="width: 50%">Value</td>
                    </tr>
                    </thead>
                    <tbody id="login_mytbody2">
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <button class="btn btn-default" id="login_add2"><i class="fa fa-plus"></i> 添加新参数</button>
            <script>
                window.jQuery || document.write('<script src="/static/201801271505/js/jquery-1.11.0.min.js"><\/script>')



            </script>
            <script type="text/javascript" src="/static/201801271505/js/bootstable.js"></script>
        </div>
        <div class="tab-pane fade" id="login_Text">
            <textarea name="" id="login_raw_Text" style="color: black;width: 98%;height: 300px"></textarea>
        </div>
        <div class="tab-pane fade" id="login_JavaScript">
            <textarea name="" id="login_raw_JavaScript" style="color: black;width: 98%;height: 300px"></textarea>
        </div>
        <div class="tab-pane fade" id="login_Json">
            <textarea name="" id="login_raw_Json" style="color: black;width: 98%;height: 300px"></textarea>
        </div>
        <div class="tab-pane fade" id="login_Html">
            <textarea name="" id="login_raw_Html" style="color: black;width: 98%;height: 300px"></textarea>
        </div>
        <div class="tab-pane fade" id="login_Xml">
            <textarea name="" id="login_raw_Xml" style="color: black;width: 98%;height: 300px"></textarea>
        </div>

{#        登录态响应#}
        <div class="tab-pane fade" id="login_response">
            <ul class="nav navbar-nav" style="width: 98%">
                <li style="width: 33%;">
            <textarea name="" id="login_response_body" disabled="disabled"
                      style="background-color: #e4f3f5;color: black;width: 100%;height: 300px"
                      placeholder="返回体"></textarea>
                </li>
                <li style="width: 33%;">
             <textarea name="" id="login_response_set"
                       style="color: black;width: 100%;height: 300px"
                       placeholder="若选用cookie持久化操作，请只输入cookie后保存。
请输入提取设置，=号左边写变量名，右边写绝对路径，多个用换行分开，格式例如：sessId=/content/sessId
token=/data/token"></textarea>
                </li>
                <li style="width: 33%;">
             <textarea name="" id="login_response_result" disabled="disabled"
                       style="background-color: #f5eeec;color: black;width: 100%;height: 300px"
                       placeholder="提取结果"></textarea>

                </li>
            </ul>
        </div>
    </div>

    <br>


</div>

<script>
    function login_show() {
        //显示蒙层，并设置好蒙层的层级关系，让其在调试层之下，其他元素之上
        document.getElementById('mengceng').style.display = 'block';
        document.getElementById('mengceng').style.zIndex = '998';
        document.getElementById('login_set_div').style.zIndex = '999';
        document.getElementById('login_set_div').style.display = 'block';
        $.get("/project_get_login/", {
            "project_id": "{{ project.id }}"
        }, function (ret) {
            console.log(ret);
            // 运行第三方表格插件的函数：
            $('#login_mytable').SetEditable({
                $addButton: $('#login_add'),
            });
            $('#login_mytable2').SetEditable({
                $addButton: $('#login_add2'),
            });
            document.getElementById('login_method').value = ret.api_method;
            document.getElementById('login_url').value = ret.api_url;
            document.getElementById('login_host').value = ret.api_host;
            document.getElementById('login_header').value = ret.api_header;
            document.getElementById('login_response_set').value = ret.set;
            // 请求体编码格式
            var body_method = '#login_' + ret.body_method;

            $("li a[href=" + body_method + "]").click();
            // 请求体显示
            if (ret.body_method == 'Text') {
                document.getElementById('login_raw_Text').value = ret.api_body;
            }
            if (ret.body_method == 'JavaScript') {
                document.getElementById('login_raw_JavaScript').value = ret.api_body;
            }
            if (ret.body_method == 'Json') {
                document.getElementById('login_raw_Json').value = ret.api_body;
            }
            if (ret.body_method == 'Html') {
                document.getElementById('login_raw_Html').value = ret.api_body;
            }
            if (ret.body_method == 'Xml') {
                document.getElementById('login_raw_Xml').value = ret.api_body;
            }
            if (ret.body_method == 'form-data') {
                var tbody = document.getElementById('login_mytbody'); // 定位表格中的tbody部分
                body = eval(ret.api_body); //把这个像列表的字符串请求体变成真正的列表
                for (var i = 0; i < body.length; i++) { // 遍历这个请求体列表
                    key = body[i][0]; //拿出每一个键值对的key
                    value = body[i][1];//拿出每一个键值对的value
                    var childs_tr = tbody.children;//获取到这个表格下面所有的tr组成的大列表
                    // 每个tr下的children得到的是 td列表，只有俩个。
                    childs_tr[i].children[0].innerText = key; //第一个td放key
                    childs_tr[i].children[1].innerText = value;//第二个td放value
                    //判断是否是最后一次遍历，来决定是否点击新增参数按钮
                    if (i < body.length - 1) {
                        document.getElementById('login_add').click()
                    }
                }
            }
            if (ret.body_method == 'x-www-form-urlencoded') {
                var tbody = document.getElementById('login_mytbody2'); // 定位表格中的tbody部分
                body = eval(ret.api_body); //把这个像列表的字符串请求体变成真正的列表
                for (var i = 0; i < body.length; i++) { // 遍历这个请求体列表
                    key = body[i][0]; //拿出每一个键值对的key
                    value = body[i][1];//拿出每一个键值对的value
                    var childs_tr = tbody.children;//获取到这个表格下面所有的tr组成的大列表
                    // 每个tr下的children得到的是 td列表，只有俩个。
                    childs_tr[i].children[0].innerText = key; //第一个td放key
                    childs_tr[i].children[1].innerText = value;//第二个td放value
                    //判断是否是最后一次遍历，来决定是否点击新增参数按钮
                    if (i < body.length - 1) {
                        document.getElementById('login_add2').click()
                    }
                }
            }

        })
    }


    function login_save() {
        // 获取所有接口设置数据
        var login_method = document.getElementById('login_method').value;
        var login_url = document.getElementById('login_url').value;
        var login_host = document.getElementById('login_host').value;
        var login_header = document.getElementById('login_header').value;
        var login_response_set = document.getElementById('login_response_set').value;

        // 判断顶部的数据是否填充完
        if (login_method == 'none') {
            alert('请选择请求方式！');
            return
        }
        if (login_url == '') {
            alert('请输入url！');
            return
        }
        if (login_host == '') {
            alert('请输入host！');
            return
        }

        //判断关键数据是否符合规则
        if (login_host.slice(0, 7) != 'http://' && login_host.slice(0, 8) != 'https://' && login_host.slice(0, 4) != '全局域名') {
            alert('host必须以http://或https://开头！');
            return
        }
        if (login_header != '') {
            try {
                JSON.parse(login_header)
            } catch (e) {
                alert('header请求头不符合json规范！');
                return
            }
        }

        var login_body_method = $('ul#login_myTab li[class="active"]')[0].innerText;
        if (login_body_method == '返回体') {
            alert('请切换到请求体tab再保存！')
            return
        }

        if (login_body_method == 'none') {
            var login_api_body = ''
        }
        if (login_body_method == 'form-data') {
            var login_api_body = []; //新建这个空列表用来存放后续的数据
            var tbody_ = $("table#login_mytable tbody")[0]; //获取该表格的内容部分
            var trlist = tbody_.children; //获取下面所有tr，每个tr就是一个键值对实际上
            for (var i = 0; i < trlist.length; i++) {
                var tdarr = trlist[i].children; // 获取tr下的俩个td
                var key = tdarr[0].innerText; // 获取key
                var value = tdarr[1].innerText; // 获取value
                login_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
            }
            var login_api_body = JSON.stringify(login_api_body);
        }
        if (login_body_method == 'x-www-form-urlencoded') {
            var login_api_body = []; //新建这个空列表用来存放后续的数据
            var tbody_ = $("table#login_mytable2 tbody")[0]; //获取该表格的内容部分
            var trlist = tbody_.children; //获取下面所有tr，每个tr就是一个键值对实际上
            for (var i = 0; i < trlist.length; i++) {
                var tdarr = trlist[i].children; // 获取tr下的俩个td
                var key = tdarr[0].innerText; // 获取key
                var value = tdarr[1].innerText; // 获取value
                login_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
            }
            var login_api_body = JSON.stringify(login_api_body);
        }
        if (login_body_method == 'Text') {
            var login_api_body = document.getElementById('login_raw_Text').value;
        }
        if (login_body_method == 'JavaScript') {
            var login_api_body = document.getElementById('login_raw_JavaScript').value;
        }
        if (login_body_method == 'Json') {
            var login_api_body = document.getElementById('login_raw_Json').value;

        }
        if (login_body_method == 'Html') {
            var login_api_body = document.getElementById('login_raw_Html').value;

        }
        if (login_body_method == 'Xml') {
            var login_api_body = document.getElementById('login_raw_Xml').value;
        }


        $.get('/project_login_save/', {
            'project_id': '{{ project.id }}',
            'login_method': login_method,
            'login_url': login_url,
            'login_host': login_host,
            'login_header': login_header,
            'login_body_method': login_body_method,
            'login_api_body': login_api_body,
            'login_response_set': login_response_set,
        }, function (ret) {
            document.location.reload();
        })
    }

    function login_close() {
        document.location.reload();
    }


    function login_send() {
        // 获取接口的所有数据
        var login_method = document.getElementById('login_method').value;
        var login_url = document.getElementById('login_url').value;
        var login_host = document.getElementById('login_host').value;
        var login_header = document.getElementById('login_header').value;
        var login_response_set = document.getElementById('login_response_set').value;

        // 判断顶部的数据是否填充完
        if (login_method == 'none') {
            alert('请选择请求方式！');
            return
        }
        if (login_url == '') {
            alert('请输入url！');
            return
        }
        if (login_host == '') {
            alert('请输入host！');
            return
        }

        //判断关键数据是否符合规则
        if (login_host.slice(0, 7) != 'http://' && login_host.slice(0, 8) != 'https://' && login_host.slice(0, 4) != '全局域名') {
            alert('host必须以http://或https://开头！');
            return
        }
        if (login_header != '') {
            try {
                JSON.parse(login_header)
            } catch (e) {
                alert('header请求头不符合json规范！');
                return
            }
        }
        var login_body_method = $('ul#login_myTab li[class="active"]')[0].innerText;
        if (login_body_method == '返回体') {
            alert('请切换到请求体tab再Send！');
            return
        }

        if (login_body_method == 'none') {
            var login_api_body = ''
        }
        if (login_body_method == 'form-data') {
            var login_api_body = []; //新建这个空列表用来存放后续的数据
            var tbody_ = $("table#login_mytable tbody")[0]; //获取该表格的内容部分
            var trlist = tbody_.children; //获取下面所有tr，每个tr就是一个键值对实际上
            for (var i = 0; i < trlist.length; i++) {
                var tdarr = trlist[i].children; // 获取tr下的俩个td
                var key = tdarr[0].innerText; // 获取key
                var value = tdarr[1].innerText; // 获取value
                login_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
            }
            login_api_body = JSON.stringify(login_api_body);
        }
        if (login_body_method == 'x-www-form-urlencoded') {
            var login_api_body = []; //新建这个空列表用来存放后续的数据
            var tbody_ = $("table#login_mytable2 tbody")[0]; //获取该表格的内容部分
            var trlist = tbody_.children; //获取下面所有tr，每个tr就是一个键值对实际上
            for (var i = 0; i < trlist.length; i++) {
                var tdarr = trlist[i].children; // 获取tr下的俩个td
                var key = tdarr[0].innerText; // 获取key
                var value = tdarr[1].innerText; // 获取value
                login_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
            }
            login_api_body = JSON.stringify(login_api_body);
        }
        if (login_body_method == 'Text') {
            var login_api_body = document.getElementById('login_raw_Text').value;
        }
        if (login_body_method == 'JavaScript') {
            var login_api_body = document.getElementById('login_raw_JavaScript').value;
        }
        if (login_body_method == 'Json') {
            var login_api_body = document.getElementById('login_raw_Json').value;
        }
        if (login_body_method == 'Html') {
            var login_api_body = document.getElementById('login_raw_Html').value;
        }
        if (login_body_method == 'Xml') {
            var login_api_body = document.getElementById('login_raw_Xml').value;
        }


        $.get('/project_login_send/', {
            'login_method': login_method,
            'login_url': login_url,
            'login_host': login_host,
            'login_header': login_header,
            'login_body_method': login_body_method,
            'login_api_body': login_api_body,
            'login_response_set': login_response_set,
        }, function (ret) {
            $("li a[href=#login_response]").click(); //点击一下返回体按钮
            ret = eval(ret);
            document.getElementById('login_response_body').value = ret.response;//把返回值显示到返回值多行文本框中
            document.getElementById("login_response_result").value = ret.get_res

        })
    }




</script>


</body>
</html>